<!DOCTYPE html>
<html>

<head>
    <title>Leaflet ArcGIS Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([23.5, 121], 12);
        L.esri.basemapLayer('Streets').addTo(map);
        // L.esri.dynamicMapLayer({
        //     url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
        //     // opacity: 0.7
        // }).addTo(map);

        L.esri.tiledMapLayer({
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer',
            maxZoom: 15
        }).addTo(map);
    </script>
</body>

</html>